<template>
    <div class="water-ball-chart" ref="liquid"></div>
  </template>
  
  <script lang="ts">
  import { defineComponent, onMounted, ref } from 'vue';
  import * as echarts from 'echarts';
  import 'echarts-liquidfill'
  export default defineComponent({
    name: 'WaterBallChart',
    mounted() {
        const Charts = this.$refs.liquid as HTMLDivElement;
        const container1 = echarts.init(Charts);
        const option: echarts.EChartsOption = {
          series: [
            {
              type: 'liquidFill',
              data: [0.6],
              radius: '70%',
              outline: {
                show: false,
              },
              backgroundStyle: {
                borderWidth: 5,
                borderColor: '#BDDFFF',
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    { offset: 0, color: '#00b0ff' },
                    { offset: 1, color: '#53e0ff' },
                  ],
                  false
                ),
              },
              label: {
                show: true,
                color: '#fff',
                // insideColor: '#fff',
                fontSize: 40,
              },
            },
          ],
        };
  
        container1.setOption(option);
      }
  
      
  });
  </script>
  
  <style scoped>
  .water-ball-chart {
    width: 200px;
    height: 200px;
    margin: 20px auto;
  }
  </style>
  